<template>
    <div>
        <h1>会员添加</h1>
        <table class="table">
            <tbody>
                <tr>
                    <td>会员名称</td>
                    <td>
                        <input type="text" v-model="data.Name">
                    </td>
                </tr>

                <tr>
                    <td>会员密码</td>
                    <td>
                        <input type="password" v-model="data.Password">
                    </td>
                </tr>

                <tr>
                    <td>会员性别</td>
                    <td>
                        <input type="radio" value="1" name="sex" v-model="data.Sex">男
                        <input type="radio" value="2" name="sex" v-model="data.Sex">女
                    </td>
                </tr>

                <tr>
                    <td>会员生日</td>
                    <td>
                        <input type="date" v-model="data.Birthday">
                    </td>
                </tr>

                <tr>
                    <td>电话号</td>
                    <td>
                        <input type="text" v-model="data.PhoneNumber">
                    </td>
                </tr>

                <tr>
                    <td>会员年龄</td>
                    <td>
                        <input type="text" v-model="data.Age">
                    </td>
                </tr>

                <tr>
                    <td>状态</td>
                    <td>
                        <input type="radio" :value=true name="state" v-model="data.State">启用
                        <input type="radio" :value=false name="state" v-model="data.State">停用
                    </td>
                </tr>

                <tr>
                    <td>会员等级</td>
                    <td>
                        <select v-model="data.MemberLevelId">
                            <option value=0>请选择</option>
                            <option v-for="d in find" :value="d.Id">{{ d.LevelTitle }}</option>
                        </select>
                    </td>
                </tr>

                <tr>
                    <td>图片上传</td>
                    <td>
                        <input type="file" @change="Addimg">
                        <img :src="'https://localhost:7289/'+data.Img" style="width: 100px;height: 100px;" >
                    </td>
                </tr>

                <tr>
                    <td></td>
                    <td>
                        <input type="button" value="添加" @click="Adds">
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</template>

<script setup lang="ts">
import {ref,onMounted} from 'vue';
import axios from 'axios';

//下拉框
const find=ref([{
        "Id": 0,
    "LevelTitle": ""
}])

//添加
const data=ref({
    "Id": 0,
  "Name": "",
  "Password": "",
  "Sex": 1,
  "Birthday": "2025-04-05T10:08:19.191Z",
  "PhoneNumber": "",
  "Age": 0,
  "IsDelete": true,
  "CreateDate": "2025-04-05T10:08:19.191Z",
  "State": true,
  "MemberLevelId": 0,
  "Img": "string"
})



//钩子
onMounted(() => {
    Shows();
})

//下拉框
const Shows=()=>{
    axios.get("https://localhost:7289/api/Mem/xlkmemlev").then(
        res=>{
            find.value=res.data;
        }
    )
}

//图片
const Addimg=(a:any)=>{
    var f=a.target.files[0];
    var fs=new FormData();
    fs.append("file",f);
    if(f.size>1024*1024*2){
        alert("图片不能超过2M");
        return;
    }
    if(f.type!="image/jpeg"&&f.type!="image/png")
    {
        alert("图片格式只能是jpg和png");
        return;
    }
    axios.post("https://localhost:7289/api/File/files",fs).then(
        res=>{
            data.value.Img=res.data;
        }
    )
}

//添加
const Adds=()=>{
    axios.post("https://localhost:7289/api/Mem/MemAdd",data.value).then(
        res=>{
            if(res.data>0){
                alert("添加成功");
                location.href="/";
            }
            else{
                alert("添加失败");
            }
        }
    )
}





</script>

<style scoped>

</style>